<template>
    <div align="center" style="margin-top: 200px">
      <el-card style="width: 400px;color: #2b4b6b">
        <div slot="header" class="clearfix">
          <span>学生注册</span>
        </div>
        <div class="text item">
          <el-form :inline="true"  :model="user" :rules="rules" ref="user" class="demo-form-inline">
            <el-form-item label="用户名">
              <el-input v-model="user.username" placeholder="用户名"></el-input>
            </el-form-item>
            <br>
            <el-form-item label="密码" style="margin-left: 10px">
              <el-input v-model="user.password"  type="password" placeholder="密码"></el-input>
            </el-form-item>
            <br>
            <el-form-item>
              <el-button type="primary" @click="OnSubmit(1)">学生注册</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
</template>

<script>
export default {
  data () {
    return {
      user: {
        username: '',
        password: '',
      },
      rules: {
        username: [
          {required: true, message: '用户名不能为空', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '密码不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    async OnSubmit(type) {
      //请求api
      const _this = this
      const api = 'http://localhost:8152/api/auth/register'
      console.log(this.user.username,this.user.password)
      this.axios.post(api, {...this.user}).then(res => {
        console.log("---->",res.data.msg)
        if( res.data.msg == "注册成功") {
          this.$message('恭喜注册成功')
        if(type == 1) {
          _this.$router.push('/')
        }
        }else if(res.data.msg == '学生已存在')
        {
          this.$message('用户以存在')
        }else {
          console.log("---->",res.data.msg)
          this.$message('注册失败')
          this.$message.error(res.data.msg)
        }
    })
  },
    register() {
    },
}
}
</script>

<style>
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}

.clearfix:before,

.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>

